<div class="page" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

    <th:block th:each="childNav:${childNavs}">
        <th:block th:switch="${childNav.value.get(0).type}">
            <!--顶部说明模块-->
            <th:block th:case="'top_bar'">
                <div th:each="nav:${childNav.value}" class="hd">
                    <h1 class="page_title" th:text="${nav.discribe}"></h1>
                    <p class="page_desc" th:text="${nav.illustrate}">WeUI
                        是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</p>
                </div>
            </th:block>
            <!--顶部用户栏模块-->
            <th:block th:case="'user_bar'">
                <div th:each="nav:${childNav.value}" class="hd" style="background:#3cc51f">
                    <div class="weui-cell">
                        <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                            <i class="fas fa-user-circle" style="font-size: 50px;display: block;color: #FFFFFF"></i>
                        </div>
                        <div class="weui-cell__bd" style="color:#FFFFFF">
                            <p th:text="${user.account}">联系人名称</p>
                            <p th:text="${user.phone}" style="font-size: 13px;color: #888888;">手机号</p>
                        </div>
                    </div>
                </div>
            </th:block>

        </th:block>
    </th:block>

    <div class="bd">

        <th:block th:each="childNav:${childNavs}">
            <th:block th:switch="${childNav.value.get(0).type}">
                <!--这里是搜索框模块-->
                <th:block th:case="'search_bar'">
                    <div th:each="nav:${childNav.value}" class="weui-search-bar" id="searchBar">
                        <div class="weui-search-bar__form" action="#">
                            <div class="weui-search-bar__box" >
                                <i class="weui-icon-search"></i>
                                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索"
                                       required="">
                                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                            </div>
                            <label class="weui-search-bar__label" id="searchText"
                                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                                <i class="weui-icon-search"></i>
                                <span th:text="${nav.discribe}">搜索</span>
                            </label>
                        </div>
                        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                    </div>
                </th:block>
                <!--带图标和描述的列表模块-->
                <th:block th:case="'list'">
                    <div class="weui-cells__title"></div>
                    <div class="weui-cells">
                        <a th:each="nav:${childNav.value}"
                           class="weui-cell weui-cell_access weui-cell_example weui-click__go"
                           href="javascript:;"
                           th:data-go="((${nav.perload} != 0)? 'child_page_'+${nav.id} : 'inside_load')"
                           th:data-url="((${nav.perload} == 0)?${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()+'/'+ nav.url}:null) ">
                            <div class="weui-cell__hd"><i th:class="${nav.icon}" aria-hidden="true"
                                                          th:style="'width:20px;margin-right:16px;display:block;color:'+${nav.color}"></i>
                            </div>
                            <div class="weui-cell__bd">
                                <p th:text="${nav.discribe}">cell standard</p>
                            </div>
                            <div th:text="${nav.illustrate}" class="weui-cell__ft">说明文字</div>
                        </a>
                    </div>
                </th:block>
                <!--带图标的九宫格模块-->
                <th:block th:case="'grid'">
                    <div class="weui-cells__title"></div>
                    <div class="weui-cells">
                        <div class="weui-grids">
                            <a th:each="nav:${childNav.value}" href="javascript:;" class="weui-grid weui-click__go"
                               th:data-go="((${nav.perload} != 0)? 'child_page_'+${nav.id} : 'inside_load')"
                               th:data-url="((${nav.perload} == 0)?${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()+'/'+ nav.url}:null) ">
                                <div class="weui-grid__icon">
                                    <i th:class="${nav.icon}" th:style="'font-size:28px;color:'+${nav.color}"></i>
                                </div>
                                <p th:text="${nav.discribe}" class="weui-grid__label">Grid</p>
                            </a>
                        </div>
                    </div>
                </th:block>
            </th:block>
        </th:block>
    </div>
    <div class="ft">
        <a href="javascript:home()"><img src="./images/icon_footer.png"></a>
    </div>
</div>